<!-- 显示AI面试结果,与建议 -->
<template>
  <div class="interview-result" :class="{loading:isLoading}">
    <div v-if="isLoading">
      <loading :text="'正在为您分析面试报告中...'" />
    </div>
    <template v-else-if="!isLoading">
      <div class="result">
        <h2 class="result-title">AI面试结果分析</h2>
        <ul class="result-content">
          <li class="result-item-title">回答</li>
          <li class="result-item-title">推荐回答</li>
          <li class="result-item-title">面试结果</li>
          <li class="result-item-title">建议</li>
          <template v-for="(advice,index) in adviceList" :key="advice.id">
            <li>{{answerList[index].answer}}</li>
            <li>{{ advice.suggestAnswer }}</li>
            <li class="score">{{advice.score}}分/100分</li>
            <li>{{ advice.advice }}</li>
          </template>
          <li class="appraise">综合评价</li>
          <li class="appraise-content">{{ allAdvice.knowledgeGaps }}</li>
          <li class="suggestion">综合建议</li>
          <li class="suggestion-content">{{allAdvice.learningDirection}}</li>
        </ul>
      </div>
      <div class="btn-group">
        <!-- 生成图标按钮 -->
        <el-button type="primary" @click="generateCharts">生成面试分析表</el-button>
        <el-button type="primary" @click="back">返回</el-button>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import loading from '@/components/loading/loading.vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const isLoading = ref(true)
const adviceList = ref([])
const allAdvice = ref({})
const answerList = ref([])

if (history.state.answerList) {
  answerList.value = JSON.parse(history.state.answerList)
}
const endInterview = async () => {
  console.log(1)
  if (isLoading.value) {
    console.log(2);
    await axios
      .post(
        'https://open.bigmodel.cn/api/paas/v4/chat/completions',
        {
          model: 'glm-4',
          messages: [
            {
              role: 'system',
              content: '必须回答完整，不能出现回答不完整，格式：返回json数据形式对象数组,其中对象属性有id(从1开始自增),score(满分100分),suggestAnswer(你提供的专业答案,最多200字),advice(我提供数据对应id的question的answer,提供你的专业的advice,advice可以联网获取，字数在50-100之间)。最后再添加一个对象，其中属性knowledgeGaps,learningDirection(你对与上面所有问题的一个综合建议与知识点缺漏与学习方向)。只返回json数据',
              prompt_template:'你要扮演专业的面试官，必须了解各个岗位的面试流程和专业知识。我是应聘者，我会告诉你我将要面试的岗位，你需要针对我面试的岗位对我进行专业的面试。你匹配我提供的10个岗位信息问题和回答,对我的answer进行评分,并给出专业的建议和推荐的回答。返回json数据形式对象数组,其中对象属性有id(从1开始自增),score(满分100分),suggestAnswer(你提供的专业答案,最多200字),advice(我提供数据对应id的question的answer,提供你的专业的advice,advice可以联网获取，字数在50-100之间)。最后再添加一个对象，其中属性knowledgeGaps,learningDirection(你对与上面所有问题的一个综合建议与知识点缺漏与学习方向)。只返回json数据'
            },
            {
              role: 'user',
              content: JSON.stringify(answerList.value)
            }
          ]

        },
        {
          headers: {
            Authorization:
              'eyJhbGciOiJIUzI1NiIsInNpZ25fdHlwZSI6IlNJR04ifQ.eyJhcGlfa2V5IjoiMGMyOThjYmEzYTMyMmZjMTEwNmQ4MzA4M2MwYTlkNDIiLCJleHAiOjE3MjQxOTgyMDkzNDksInRpbWVzdGFtcCI6MTcyMTUxOTgwOTM0OH0.PdtjS07SG14RpkFupRUDdNUBWvgBx4VcSyJEutQ3BZE',
            'Content-Type': 'application/json'
          }
        }
      )
      .then((res) => {
        let data = res.data.choices[0].message.content.replace('```json', '').replace('```', '')
        console.log(data)
        console.log('dataJSON', data.match(/(?<=\[)[^\]]+/,)[0])
        adviceList.value = JSON.parse(data)
        console.log(adviceList.value)
        allAdvice.value = adviceList.value.pop()
        console.log(allAdvice.value, adviceList.value)
      })
      .catch((err) => {
        console.log(err)
      })
      .finally(() => {
        isLoading.value = false
        console.log('start', isLoading.value);
      })
    }
}
endInterview()

const back = () => {
  router.push('/geek/interview')
}
// 输出时间戳
console.log(new Date().getTime())
console.log(new Date().getTime() + 1000 * 60 * 60 * 24 * 30)
</script>

<style scoped>
.interview-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: var(--windowHeight);
  width: 1184px;
  margin: 10px auto;
  /* background: var(--childThemeColor); */
  overflow-y: auto;
}

.interview-result.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--windowHeight);
  font-size: var(--font-16);
}
.interview-result::after {
  content: '';
  position: absolute;
  display: block;
  min-width:var(--windowWidth);
  height: 100vh;
  inset: 0;
  background: var(--childThemeColor);
  z-index: -1;
}

.result-title{
  text-align: center;
  margin-bottom: 32px;
}

.result-content{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  text-align: start;
  background-color: #fff;
  gap: 1px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  margin-bottom: 32px;
}

.result-content li{
  display: grid;
  background:linear-gradient(180deg, #7fd3fb, #9bdff2);
  align-items: center;
  justify-items:center ;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 12px;
}

.result-item-title{
  font-weight: bold;
  text-align: center;
}

.score{
  text-align: center;
}

.appraise ,.suggestion{
  font-weight: bold;
  text-align: center;
}

.appraise-content, .suggestion-content{
  font-weight: 600;
  color: brown;
}

:deep(.el-button){
  background:var(--btnBgColor);
}
:deep(.el-button:hover){
  background:var(--btnHoverBgColor);
}
:deep(.el-button + .el-button){
  margin-left: 500px;
}
</style>
